<script lang="ts" setup>
// import type { Strategies } from '@/types/common'
import dayjs from 'dayjs'
// import { getApiNodeWafListApi } from '@/apis/modules/resolve/statistics'
import { getCdnStatisticsWafApi } from '@/apis/modules/cdn.ts'
import { useLineCharts } from '@/components/cloud-charts'
import { formatChartsUnix, getChartData } from '@/utils/cdn'
import useTableColumn from '../column'

const props = withDefaults(defineProps<IProps>(), {
  type: 'custom',
})
const { staCodeNumberFormat } = useTableColumn()
interface IProps {
  type: 'custom' | 'rate'
  params: any
  timeDate: any
  siteId: any
  mathRandom: number
}
const time = ref({
  start_time: '',
  end_time: '',
})
const preventData = ref([])
const observeData = ref([])
const times = ref<any[]>([])
const unitData = ref<string>('day')
const dataSource = ref<any[]>([
  {
    label: '',
    data: preventData,
  },
  {
    label: '',
    data: observeData,
  },
])

const colorsList = ref(['#FDA069', '#FE6E6D'])

function valueNumberFormatters(val: number | string) {
  if (val === '-') {
    return '-'
  }
  return (
    staCodeNumberFormat(Number(val)).value
    + staCodeNumberFormat(Number(val)).unit
  )
}

const { options } = useLineCharts({
  categories: times,
  dataSource,
  legendPosition: 'tr',
  colors: colorsList.value,
  valueFormatter: valueNumberFormatters,
  labelFormatter: val => formatChartsUnix(val, unitData.value),
})

/** 获取自定义规则数据 */
function getCustomData() {
  const { start_time, end_time } = time.value
  getCdnStatisticsWafApi({
    data: {
      start_time: Number(start_time),
      end_time: Number(end_time),
      node_ids: props.params.node_ids.length > 0 ? props.params.node_ids : [],
      group_id: props.params.group_id ? props.params.group_id : 0,
      module: 1,
    },
  }).then((res) => {
    const {
      seriesData: block_cnt,
      xAxisData,
      unit,
    } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'block_cnt',
      'time',
      1,
      60,
    )
    const { seriesData: log_cnt } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'log_cnt',
      'time',
      1,
      60,
    )

    observeData.value = block_cnt
    preventData.value = log_cnt
    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '观察',
        data: preventData,
      },
      {
        label: '阻止',
        data: observeData,
      },
    ]
    colorsList.value = ['#FDA069', '#FE6E6D']
  })
}

/** 获取速率限制数据 */
function getRateData() {
  const { start_time, end_time } = time.value
  getCdnStatisticsWafApi({
    data: {
      start_time: Number(start_time),
      end_time: Number(end_time),
      node_ids: props.params.node_ids.length > 0 ? props.params.node_ids : [],
      group_id: props.params.group_id ? props.params.group_id : 0,
      module: 2,
    },
  }).then((res) => {
    const {
      seriesData: block_cnt,
      xAxisData,
      unit,
    } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'block_cnt',
      'time',
      1,
      60,
    )
    const { seriesData: log_cnt } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'log_cnt',
      'time',
      1,
      60,
    )
    preventData.value = log_cnt
    observeData.value = block_cnt
    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '观察',
        data: preventData,
      },
      {
        label: '阻止',
        data: observeData,
      },
    ]
    colorsList.value = ['#FDA069', '#FE6E6D']
  })
}

onMounted(() => {
  timeReset()
})

function timeReset() {
  time.value.start_time = String(dayjs(props.timeDate).unix())
  time.value.end_time = String(dayjs(props.timeDate).unix() + 86399)
}
const apiMap: Strategies<() => void> = {
  custom: getCustomData,
  rate: getRateData,
}

watch(
  () => props.type,
  () => {
    timeReset()
    if (Object.prototype.hasOwnProperty.call(apiMap, props.type)) {
      apiMap[props.type]()
    }
  },
)

watch(
  () => props.mathRandom,
  () => {
    timeReset()
    if (Object.prototype.hasOwnProperty.call(apiMap, props.type)) {
      apiMap[props.type]()
    }
  },
)
</script>

<template>
  <cloud-charts :options="options" />
</template>
